<template>
	<view>
		<view class="top">
			<view class="top-title">
				电子兑换码/券接收方式
			</view>
			<input class="top-code" type="text" placeholder="电子兑换码/券接收方式" v-model="ipone">
			<view class="top-tips">
				<image src="/pagesA/static/images/icon/zhuyi.png" ></image>
				<view  style="width: 650rpx;line-height: 30rpx;">您本次购买的商品不需要收货地址，请正确输入接收手机号码，确保及时
					获得“电子兑换码”。可使用您已经绑定的手机或重新输入其它手机号码。</view>
			</view>
		</view>
		<view class="content">
			<view class="commodity">
				<view class="commodity-title">商品信息</view>
				<view class="commodity-shop">店铺：{{shopping.store_name}}</view>
				<view class="flex1 commodity-product">
					<image class="imagecp" :src="shopping.goods_image_url" mode="widthFix"></image>
					<view class="rither">
						<view class="rithertop">
							{{shopping.goods_name}}
						</view>
						<view class="ritherbottom">
							<view class="ritherle">
								￥{{shopping.goods_price}}
							</view>
							<view class="ritherre">
								X{{shopping.quantity}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="freight">
			<view class="">
				运费
			</view>
			<view class="">
				免运费
			</view>
		</view>
		<view class="yan">
			买家留言
			<textarea class="liu" v-model="liyan"></textarea>
		</view>
		<view class="tijia">
			<view class="">
				￥{{shopping.goods_total}}
			</view>
			<view @click="sumbert" class="sumber">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ipone:'',
				liyan:'',
				canshu:'',
				shopping:''
			}
		},
		onLoad(e){
			console.log(e);
			this.canshu=e
			this.shop()
		},
		methods: {
			shop(){
				let that=this
				this.$util.request({
					url:'/mobile/index.php?act=member_vr_buy&op=buy_step1',
					method:'post',
					data:{
						goods_id:this.canshu.cart_id,
						quantity:this.canshu.num
					}
				}).then(res=>{
					that.shopping=res.datas.goods_info
					that.ipone=res.datas.member_info.member_mobile
				})
			},
			sumbert(){
				if(this.ipone==''||this.ipone==undefined||this.ipone==null){
					uni.showToast({
						title:'请填写电子兑换码/券接收方式',
						icon:"none"
					})
				}else{
					console.log('--------');
					this.$util.request({
						url:'/mobile/index.php?act=member_vr_buy&op=buy_step2',
						method:'post',
						data:{
							goods_id:this.canshu.cart_id,
							quantity:this.canshu.num,
							buyer_phone:this.ipone
						}
					}).then(res=>{
						if(res.error_code==0){
							uni.redirectTo({
								url:'/plug/pay/cashier?pay_sn='+res.datas.pay_sn+'&moeny='+this.shopping.goods_total+'&order_sn='
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0 50rpx 0;
		box-sizing: border-box;
		.top-title {
			font-size: 31rpx;
			font-weight: bold;
			color: #333333;
			width: 683rpx;
			margin: 0 auto ;
		}

		.top-code {
			width: 683rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			border: 1rpx solid #ECECEC;
			margin: 20rpx auto;
			line-height: 80rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		.top-tips{
			width: 683rpx;
			margin: 0 auto;
			font-size: 20rpx;
			font-weight: 400;
			color: #909090;
			display: flex;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.content{
		width: 750rpx;
		margin-top: 10rpx;
		background-color: #FFFFFF;
		color: #333333;
		.commodity{
			width: 750rpx;
			padding: 20rpx 43rpx 45rpx 36rpx;
			box-sizing: border-box;
			.commodity-title{
				font-size: 32rpx;
				font-weight: bold;
			}
			.commodity-shop{
				font-size: 28rpx;
				font-weight: 400;
				margin: 10rpx 0 30rpx 0;
			}
			.commodity-product{
				.imagecp{
					width: 150rpx;
					height: 150rpx;
					background: #FFFFFF;
					border: 1rpx solid #EBEBEB;
				}
				.rither{
					margin-left: 30rpx;
					width: 490rpx;
					height: 150rpx;
					.rithertop{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 1.5;
						height: 90rpx;
					  /* 超过了就隐藏 */
						overflow: hidden;
						/* 超过了就显示省略号 */
						text-overflow: ellipsis;
						
						/* webkit内核的浏览器 */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.ritherbottom{
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						.ritherle{
							color: #FF4444;
						}
					}
				}
			}
		}
	}
	.freight{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		align-items: center;
		background-color: #FFFFFF;
		margin: 1px 0;
	}
	.yan{
		padding: 30rpx 30rpx 50rpx;
		background-color: #fff;
	}
	.liu{
		width: 690rpx;
		height: 155rpx;
		background: #F5F5F5;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
	}
	.sumber{
		width: 200rpx;
		height: 98rpx;
		background: #FF4300;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}
	.tijia{
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		
	}
	.tijia view:nth-child(1){
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4300;
		line-height: 98rpx;
		margin-left: 44rpx;
	}
</style>
